<template>
  <div class="order">
    <el-card>
      <!-- 搜索组件 -->
      <!-- <search-form :items="formItems" :params="params" :on-submit="onSearch" :btn-loading="loading" /> -->

      <!-- 左上角按钮 -->
      <div class="table-left-top">
        <el-button icon="el-icon-plus" size="mini" type="primary" @click="addPop">新增商品</el-button>
      </div>

      <!-- 表格区域 -->
      <div class="table-body">
        <el-table ref="listData" style="margin-top: 10px" :data="listData">
          <el-table-column type="selection" width="55" />
          <el-table-column label="商品图片">
            <template slot-scope="scope">
              <el-image 
                style="width: 100px; height: 100px"
                :src="scope.row.img" 
                :preview-src-list="[scope.row.img]">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" />
          <el-table-column prop="price" label="商品单价">
            <template slot-scope="scope">
              {{scope.row.price}}
            </template>
          </el-table-column>
          <el-table-column prop="salesVolume" label="商品销量" />
          <el-table-column prop="stockNumber" label="库存数量">
            <template slot-scope="scope">
              <el-input @blur="changeStockNumber(scope.row.id,scope.row.stockNumber)" style="width:100px" type="number" v-model="scope.row.stockNumber" placeholder="请输入内容"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="storeName" label="所属店铺" />
          <el-table-column prop="goodsType" label="所属分类" />
          <el-table-column prop="price" label="是否上架">
            <template slot-scope="scope">
              <el-switch
              @change="statusChange(scope.row.id,scope.row.check)"
              v-model="scope.row.check"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="editPop(scope.row)">编辑</el-button>
              <el-button size="mini" type="text" @click="delBtn(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="page_box" v-show="total>0">
        <pagination
          :page.sync="params.current"
          :limit.sync="params.size"
          @pagination="getList"
          :total="total"
        />
      </div>

      <!-- 编辑或新增 -->
      <el-dialog
        v-if="dialog"
        :title="mdl.id ? '编辑类型' : '新增类型'"
        :visible.sync="dialog"
        width="500px"
        :close-on-click-modal="false"
        destroy-on-close
      >
        <form-model :mdl="mdl" :parent-id="parentId" :handle-close-drawer="handleCloseDialog" @getList="getList" />
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import SearchForm from '@/components/SearchForm'
import { getGoodsPage,delGoods,updateGoodsStock,putawayGoods } from '@/api/user'
import FormModel from './FormModel.vue'
export default {
  components: { SearchForm, FormModel },
  data() {
    return {
      params: {
        current: 1,
        size: 10,
      },
      total:0,
      loading: false,
      listData: [],
      mdl: {},
      parentId: 0,
      dialog: false, // 新增、编辑弹框
    }
  },
  computed: {
    formItems() {
      // 状态
      const statusOptions = [
        { label: '啊啊', value: 0 },
        { label: '啊啊', value: 1 }
      ]

      // 构建搜索表单
      return [
        { title: '啊啊', type: 'input', key: 'material_name', maxlength: 30 },
        { title: '啊啊', type: 'select', key: 'status', options: statusOptions },
        { title: '啊啊', type: 'date-range', key: 'created_at' }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 上下架
    statusChange(goodsId,putaway){
      console.log(goodsId,putaway)
      putaway = putaway?1:0
      putawayGoods({goodsId,putaway}).then(res=>{
        if (res.statusCode === '00000') {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
        }else{
          this.$message.error('修改失败');
        }
      })
    },

    // 修改库存
    changeStockNumber(goodsId,number){
      console.log(goodsId,number)
      updateGoodsStock({goodsId,number}).then(res=>{
        if (res.statusCode === '00000') {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
        }else{
          this.$message.error('修改失败');
        }
      })
    },

    // 删除
    delBtn(row) {
      const that = this
      that.$confirm('确认删除？')
        .then(_ => {
          delGoods({
            id: row.id
          }).then(res => {
            if (res.statusCode === '00000') {
              that.getList()
            }
          })
        })
        .catch(_ => {

        })
    },
    // 获取列表
    getList() {
      getGoodsPage(this.params).then(res => {
        if (res.statusCode === '00000') {
          res.data.records.map(item=>{
            if(item.putaway){
              item.check = true
            }else{
              item.check = false
            }
          })
          this.listData = res.data.records
          this.total = res.data.total
        }
      })
    },

    // 搜索按钮
    onSearch() {
      console.log(this.params)
      this.getList()
    },

    // 新增-弹窗
    addPop() {
      this.dialog = true
      this.mdl = {}
    },

    // 修改-弹窗
    editPop(item) {
      console.log(item)
      this.mdl = Object.assign({}, item)
      this.dialog = true
    },

    // 关闭dialog方法
    handleCloseDialog() {
      this.dialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
.order {
  margin: 20px;
}
</style>
